<template>
    <div class="common-detail" id="userDetail">
        <div class="container">
            <div class="title">基础信息</div>
            <info-table :sideData="sideData" :data="infoTable"></info-table>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class UserDetail extends Vue {
    sideData: any = {
        url: '',
        name: ''
    }
    detailData: any = {}
    infoTable: any[] = []

    get userId () {
        return this.$route.query.userId
    }

    init () {
        this.getDetail()
    }
    getDetail () {
        this.$api.userDetailFetch({ userId: this.userId }).then(({ data }: any) => {
            let infoTableCols: any = {
                'userId': '用户ID',
                'mobile': '手机号',
                'createTime': '注册时间',
                'statusValue': '状态'
            };
            let infoTable: any[] = [];
            Object.keys(infoTableCols).forEach(item => {
                let infoValue = data[item];
                infoTable.push({ label: infoTableCols[item], value: infoValue });
            });
            this.infoTable = infoTable;
            let { nickname, portrait } = data;
            Object.assign(this.sideData, {
                name: nickname,
                url: portrait
            });
            this.detailData = data
        });
    }
}
</script>

<style lang="scss">
#userDetail {
    .row-flex {
        > div {
            height: 65px;
        }
    }
    .item-box{
        display: flex;
        flex-direction: column;
        .item-show{
            margin-bottom: 12px;
            text-align: left;
        }
        .item-show:last-child{
            margin-bottom: 0;
        }
    }
}
</style>
